<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><link href="App_Themes/demo/css/demoStyles.css" type="text/css" rel="stylesheet" /><link href="App_Themes/demo/css/gridView.css" type="text/css" rel="stylesheet" /><link href="App_Themes/demo/css/jquery-ui-1.10.4.custom.css" type="text/css" rel="stylesheet" /><link href="App_Themes/demo/css/nav.css" type="text/css" rel="stylesheet" /></head>
<body>
    <form method="post" action="Default.aspx" id="userForm">

<script src="Library/jQuery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Library/jQuery/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script type="text/javascript">

	function EqualHeight(group)
{
	var TallestHeight = 0;
	group.each(function()
	{
		var myHeight = $(this).height();
		if(myHeight > TallestHeight) TallestHeight = myHeight;
	});
	group.height(TallestHeight);
}
$(document).ready(function()
{
	EqualHeight($(".column"));
});

$(document).ready(function()
{
	$("#dropZone").droppable({
		hoverClass: "border",
		accept: ".dragMe",
		drop: function(event,ui)
		{
			$(this).find(".placeholder").remove();
			$("<li></li>").text(ui.draggable.text()).appendTo(this);
			ui.draggable.remove();

		}
	});
});

$(document).ready(function()
{
	$(".dragMe").draggable({revert: "invalid", containment: "document"});
});

</script>
		<div class="CenterPage" id="PageMaster">
			<div id="total" class="LeftPanel column width160">
				<span>Item List</span>
				<ul id="dropZone" class="width160">
					<li class="placeholder">Place Items Here</li>
				</ul>
			</div>
			<span class="ui-draggable">Drag Item</span>
			<div class="dragMe width160">
				<ul class="ui-draggable">
					<li class="item">Drag me</li>
				</ul>
			</div>
			<div>
				<input type="submit" name="ctl00$PageContent$btnTest" value="Post Me!" id="PageContent_btnTest" />
			</div>
		</div>
    </form>
</body>
</html>
